<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table {
				margin-top: 10px;
				border: 1px solid black;
				width: 1500px;
				text-align: center;
			}

			table tr td {
				border: 1px solid black;
				height: 100px;
			}

			img {
				width: 200px;
				height: 100px;
			}
		</style>


		<script>
			let shops = [{
					"id": 1,
					"name": "铅笔",
					"price": "2元",
					"img": "img/pencil.png",
				},
				{
					"id": 2,
					"name": '洗衣液',
					"price": '20元',
					"img": "img/wash.png"
				},
				{
					"id": 3,
					"name": '橡皮擦',
					"price": '3元',
					"img": "img/eraser.jpg"
				},
				{
					"id": 4,
					"name": '钢笔',
					"price": '10元',
					"img": "img/pen.jpg"
				},
				{
					"id": 5,
					"name": '笔记本',
					"price": '2元',
					"img": "img/computer.jpg"
				},
				{
					"id": 6,
					"name": '卫生纸',
					"price": '15元',
					"img": "img/paper.jpg"
				},
				{
					"id": 7,
					"name": '鼠标',
					"price": '30元',
					"img": "img/mouse.jpg"
				},
				{
					"id": 8,
					"name": '肥皂',
					"price": '6元',
					"img": "img/soap.jpg"
				},
				{
					"id": 9,
					"name": '马桶塞',
					"price": '9元',
					"img": "img/tool.jpg"
				}
			]
			window.onload = function() {
				let tab = document.querySelector('table');
				let inp = document.querySelector('input');
				let btn = document.querySelector('button');
				for (let i = 0; i < shops.length; i++) {
					tab.innerHTML += `<tr>
					<td>${shops[i].id}</td>
					<td>${shops[i].name}</td>
					<td>${shops[i].price}</td>
					<td><img src = "${shops[i].img}"></td>
					</tr>`;
					// console.log(`名字 is: ${users[i].name}`, `街道名字 is: ${users[i].address.street}`, `公司名字 is: ${users[i].company.name}`);
				}

				btn.onclick = function()
				{
	                    tab.innerHTML = '';
	                    
	                    for (let i = 0; i < shops.length; i++) 
						{
	                        let t = shops[i].name.includes(inp.value);
	                        if (t == true) 
							{
	                            tab.innerHTML +=
	                                `<tr>
	                                    <td>${shops[i].id}</td>
	                                    <td>${shops[i].name}</td>
	                                    <td><img src = "${shops[i].img}"></td>
	                                    <td>${shops[i].price}</td>
	                            </tr>`
	                        }
	                        if(i == shops.length - 1 && tab.innerHTML == '')
							{
	                            tab.innerHTML = '对不起，没有您要的商品！';
	                        }
	                    }				
				}
			}
		</script>
	</head>
	<body>
		<input type="text">
		<button>搜索</button>
		<h3 style="color: red;"></h3>
		<table>

		</table>
	</body>
</html>